<style>
    body {
        background-color: #ffffff;
    }

    .xm-select-size {
        width: 200px;
        float: left;
    }
</style>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value=""
                   class="layui-input">
            <tip></tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block">
            <input type="text" name="label"  placeholder="请输入标签" value="" class="layui-input">
            <tip></tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-block">
            <input type="text" name="tel" lay-verify="required" lay-reqtext="电话不能为空" placeholder="请输入电话" value="" class="layui-input">
            <tip></tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">选择地址</label>
        <div class="layui-input-block">
            <div id="provinces" class="xm-select-size"></div>
            <div id="cities" class="xm-select-size"></div>
            <div id="areas" class="xm-select-size"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">选择定位</label>
        <div class="layui-input-inline">
            <div id="address"></div>
            <input name="address_name" id="address_name" value="" type="hidden" />
            <input type="hidden" id="address_data" name="address_data">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">上传图片(方形)</label>
        <div class="layui-input-inline">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="btn_upload">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="upload_image">
                    <p id="upload_content"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="upload_press">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">上传缩略图(长)</label>
        <div class="layui-input-inline">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="btn_thumb">上传缩略图</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="img_thumb">
                    <p id="text_thumb"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="press_thumb">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">剧场描述</label>
        <div class="layui-input-block">
            <textarea name="remark" class="layui-textarea" placeholder="请输入剧场描述"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.config({
        base: '/static/extends/'
    }).extend({
        xmSelect: 'xmSelect/xm-select'
    });
    layui.use(['form', 'xmSelect', "upload", "element"], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            xmSelect = layui.xmSelect,
            upload = layui.upload,
            element = layui.element;

        let uploadInst = upload.render({
            elem: '#btn_upload'
            , url: "{:url('upload/file')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , field: 'image'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_image').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != "{$result.normal}") {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#upload_content').html('<input type="hidden" name="thumb" value="' + res.data.url + '">'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#upload_content');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('upload_press', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        let uploadInstThumb = upload.render({
            elem: '#btn_thumb'
            , url: "{:url('upload/file')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , field: 'image'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img_thumb').attr('src', result); //图片链接（base64）
                });

                element.progress('press_thumb', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != "{$result.normal}") {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#text_thumb').html('<input type="hidden" name="thumb_img" value="' + res.data.url + '">'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#text_thumb');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInstThumb.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('press_thumb', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        let provinces = xmSelect.render({
            el: '#provinces',
            filterable: true,
            searchTips: '请输入城市',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'provinces',
            on: function (ret) {
                if (ret.arr.length != 0) {
                    hadmin.http("{:url('cities/getCities')}", {
                        id: ret.arr[0].value
                    }).then(res => {
                        if (res.code == "{$result.normal}") {
                            cities.update({
                                data: res.data
                            })
                        }
                    })
                }
            }
        })
        let cities = xmSelect.render({
            el: '#cities',
            filterable: true,
            searchTips: '请输入城市',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'cities',
            on: function (ret) {
                if (ret.arr.length != 0) {
                    hadmin.http("{:url('areas/getAreas')}", {
                        id: ret.arr[0].value
                    }).then(res => {
                        if (res.code == "{$result.normal}") {
                            areas.update({
                                data: res.data
                            })
                        }
                    })
                }
            }
        })
        let areas = xmSelect.render({
            el: '#areas',
            filterable: true,
            searchTips: '请输入城市',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'areas',
        })
        let address = xmSelect.render({
            el: '#address',
            filterable: true,
            searchTips: '请输入定位',
            radio: true,
            clickClose: true,
            data: [],
            paging: true,
            pageSize: 10,
            name: 'address',
            remoteSearch: true,
            prop: {
                name: 'title',
                value:'id'
            },
            remoteMethod: function (val, cb, show) {
                //这里如果val为空, 则不触发搜索
                if (!val) {
                    return cb([]);
                }
                // console.log(val)
                let provincesName = provinces.getValue()
                hadmin.http("{:url('getAddress')}",{
                    keywords:val,
                    provincesName:provincesName
                }).then(res=>{
                    if(res.code == 1){
                        return cb(res.data.data);
                    }
                })
            },
            on:function (res) {
                console.log(res)
                if(res.arr.length != 0){
                    $("#address_name").val(res.arr[0]['title']);
                    $("#address_data").val(JSON.stringify(res.arr[0]));
                }
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            hadmin.http("{:url('save')}", data.field).then(res => {
                if (res.code == "{$result.normal}") {
                    hadmin.father_reload();
                }
            })

            return false;
        });
        hadmin.http("{:url('provinces/getProvinces')}").then(res => {
            if (res.code == "{$result.normal}") {
                provinces.update({
                    data: res.data
                })
            }
        })

    });
</script>
</body>
</html>